import { defineComponent, ref } from 'vue';
import '@/style.less';
export default defineComponent({
  props: {
    width: {
      type: String,
      default: '1920px'
    },
    height: {
      type: String,
      default: '1080px'
    }
  },
  setup(props) {
    // const width = ref(null); //设计宽度
    // const height = ref(null); //设计高度
    const scale = ref(null);

    const width1 = ref('');
    const height1 = ref('');
    const init = () => {
      setScale();
      window.addEventListener('resize', setScale);
    };
    const setScale = () => {
      const ww = window.innerWidth / props.width;
      const wh = window.innerHeight / props.height;
      width1.value = props.width + 'px';
      height1.value = props.height + 'px';
      scale.value = ww < wh ? ww : wh;
    };

    init();
    return () => (
      <div class="scale-box">
        <slot></slot>
      </div>
    );
  }
});
